<template>
    <div class="component-repayment-list">
        <modal
            :show='show'
            mode='bottom'
            closeButton
            @close='closeRepayment'>
            <div class="component-repayment-list__header">还款列表</div>
            <div class="wrapper">
                <div class="component-repayment-list__list">
                    <div class="component-repayment-list__item" v-for='item in value'>
                        <check-box class='component-repayment-list__checkbox' v-model='item.check'></check-box>
                        <div class="component-repayment-list__info">
                            <div class="component-repayment-list__period">
                                <p class="money">{{item.repayAmount | toYuan}}</p>
                                <p class="period">[{{item.currentPeriod}}/{{item.totalPeriod}}期]</p>
                            </div>
                            <p class="component-repayment-list__time" 
                                v-if='!item.overdue'>剩余{{diffDay(item.shouldRepayDate)}}天</p>
                            <p class="component-repayment-list__time overdue" v-else>已逾期{{(item.overdueDays)}}天</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- footer -->
            <footer class="component-repayment-list__footer-button footer-button">
                <div class="component-repayment-list__item">
                    <check-box v-model='all' @input='toggleAllPlatform($event)' class='component-repayment-list__checkbox'></check-box>
                    <div class="component-repayment-list__info">
                        <div class="component-repayment-list__period">
                            <p class="money">{{totalPrice | toYuan}}</p>
                            <p class="period">待付款</p>
                        </div>
                        <span class="button short" @click='finish'>立即还款</span>
                    </div>
                </div>
            </footer>
        </modal>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import modal from '../components/Modal.vue'
    import checkBox from '../components/CheckBox.vue'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'
    import toYuan from '../filters/filter-toYuan'
    import dateFormat from '../filters/filter-dateFormat'
    import  { mapGetters, mapActions }  from 'vuex'
    import moment from 'moment'

    export default {
        name:'repaymentList',
        components:{
            modal,
            checkBox
        },
        filters:{
            toYuan,
            dateFormat,
        },
        props: {
            value:{
                type: Array,
                required: true,
                default:[]
            },
            show: {
                type: Boolean,
                required: true,
                default:false
            }
        },
        data() {
            return {
                all:false,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),

            totalPrice(){
                let price = 0
                _.each(this.value,(value,index)=>{
                    if(value.check == true){
                        price = price + value.repayAmount
                    }
                })
                return price
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            // function

            diffDay(time){
                let now = moment()
                let diff = moment(time)
                let diffDays = Math.ceil(diff.diff(now,'days',true))
                if(diffDays < 0){
                    diffDays -- 
                }
                return diffDays
            },
            toggleAllPlatform($event){
                if($event){
                    _.each(this.value,(val,index)=> {
                        this.value[index].check = true
                    })
                }
                else{
                    _.each(this.value,(value,index)=> {
                        this.value[index].check = false
                    })
                }
            },
            closeRepayment(){
                this.$emit('close')
            },
            finish(){
                let check = _.filter(this.value,(val,index)=>{
                    return val.check == true
                })
                if(!check.length){
                    this.setMsgTip({
                        text:'未选择还款项目！',
                        type:'warn'
                    })
                    return
                }
                this.$emit('finish')
            }
        },
        watch: {
            value:{
                handler(newVal,oldVal){
                    let allCheck = true
                    _.each(newVal,(value,index)=>{
                        if(value.check == false) 
                        allCheck = false
                        return false
                    })
                    this.all = allCheck
                },
                deep: true
            }
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .component-repayment-list{
        .component-modal__container{
            height:85%;
        }
        .component-modal__main{
            overflow:hidden;
            position: absolute;
            left:0;
            right:0;
            top:0;
            bottom:0;
        }
        .component-repayment-list__header{
            @extend %font-title;
            color:$importColor;
            text-align: center;
        }
        .wrapper{
            top:70px;
            bottom:70px;
            height:auto;
            padding-bottom: 0;
        }
        .component-repayment-list__list{
            background-color: #fff;
        }
        .component-repayment-list__item{
            display: flex;
            align-items:center;
            position: relative;
            &:after{
                content:'';
                position: absolute;
                bottom:0;
                right:0;
                left:56px;
                border-top: 1px solid $sectionColor;
            }
            &:last-child{
                &:after{
                    display: none;
                }
            }
        }
        .component-repayment-list__checkbox{
            padding:24px 32px 24px 16px ;
        }
        .component-repayment-list__info{
            flex:1;
            display: flex;
            justify-content: space-between;
        }
        .component-repayment-list__period{
            .money{
                @extend %font-body1;
                color:$importColor;
            }
            .period{
                @extend %font-caption;
            }
        }
        .component-repayment-list__time{
            @extend %font-caption;
            padding-right: 24px;
            &.overdue{
                color:$red;
            }
        }
        .component-repayment-list__footer-button{
            padding: 0;
            .component-repayment-list__item{
                flex:1;
                .money{
                    @extend %font-title;
                    color:$orange;
                }
            }
            .component-repayment-list__info{
                align-items:center;
            }
            .button{
                margin-right:16px;
            }
        }
        .component-repayment-list__header{
            @extend %font-title;
            color:$importColor;
            padding-bottom: 16px;
        }
        .component-repayment-list__item{
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .key{
                @extend %font-subhead;
                color:$importColor;
            }
            .value{
                @extend %font-title;
                text-align: right;
                .fee{
                    color:$orange;
                }
                .bank{
                    @extend %font-subhead;
                }
                .people{
                    @extend %font-caption;
                }
                .money{
                    @extend %font-subhead;
                    color:$orange;
                }
                .tips{
                    @extend %font-caption;
                }
            }
        }
        .component-repayment-list__footer{
            display: flex;
            justify-content: flex-end;
            padding-top: 14px;
            .button{
                margin: 0;
            }
        }
    }

</style>
